<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 480px;
        }
        body{
            background-image: url("./imgs/bg.jpg");
            margin: 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            text-align: center;
        }
        .el-form-item__label{
            font-weight: bold;
            color: black;
        }
    </style>
</head>
<body>
<div id="app"><!--173,216,230--> <!--255,215,000-->
    <h1>用户注册</h1>
    <el-card class="box-card" style="width: 500px; height: 450px; margin: 60px auto; background-color: rgba(173,216,230,0.3)">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"style="width: 400px; margin: 50px auto;">

            <el-form-item label="联系电话" prop="tel">
                <el-input v-model.number="ruleForm.tel"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
                <el-input type="text" v-model="ruleForm.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()"style="position: relative; right: 36px">注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<!--import axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import Element -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
     data() {
         var checkNickname = (rule, value, callback) => {
             if (value === '') {
                 return callback(new Error('请输入昵称'));
             }else {
                 callback();
             }
         };
         var checkContact = (rule, value, callback) => {
             if (!value) {
                 return callback(new Error('号码不能为空'));
             }
             setTimeout(() => {
                 if (!Number.isInteger(value)) {
                     callback(new Error('请输入数字值'));
                 }else {
                     callback();
                 }
             }, 1000);
         };
         var validatePass = (rule, value, callback) => {
             if (value === '') {
                 callback(new Error('请输入密码'));
             } else {
                 if (this.ruleForm.checkPass !== '') {
                     this.$refs.ruleForm.validateField('checkPass');
                 }
                 callback();
             }
         };
         var validatePass2 = (rule, value, callback) => {
             if (value === '') {
                 callback(new Error('请再次输入密码'));
             } else if (value !== this.ruleForm.password) {
                 callback(new Error('两次输入密码不一致!'));
             } else {
                 callback();
             }
         };
         return {
             ruleForm: {
                 nickname:'',
                 tel:'',
                 password: '',
                 checkPass: '',
             },
             rules: {
                 nickname: [
                     { validator: checkNickname, trigger: 'blur' }
                 ],
                 tel: [
                     { validator: checkContact, trigger: 'blur' }
                 ],
                 password: [
                     { validator: validatePass, trigger: 'blur' }
                 ],
                 checkPass: [
                     { validator: validatePass2, trigger: 'blur' }
                 ],
             },
         };
     },
     methods: {
         submitForm() {
             axios.post("/reg",v.ruleForm).then(function (response) {
                 if (response.data==1){
                     alert("注册成功！")
                     location.href="/";
                 }else{
                     alert("联系方式已存在！")
                 }
             })
         },
         resetForm(formName) {
             this.$refs[formName].resetFields();
         }
     }
  })
</script>
</html>